<template>
  <div>
    <el-container>
      <el-aside :width="asideWidth" class="aside">
        <Aside :isCollapse="isCollapse"></Aside>
      </el-aside>
      <el-container class="container">
        <el-header class="el-header">
          <Header @doCollapse="doCollapse" :icon="icon"></Header>
        </el-header>
        <el-main>
          <div style="min-height: 60px;">
            <Tabs></Tabs>
          </div>
          <div style="margin: 0 15px;"><router-view></router-view></div>

        </el-main>
        <el-footer class="footer">
          Copyright @2025 龙毅程序员.All rights reserved.
        </el-footer>
      </el-container>
    </el-container>

  </div>
</template>
<script>
import Aside from '@/components/Aside.vue'
import Header from '@/components/Header.vue';
import Tabs from '@/components/Tabs.vue';
export default {
  // eslint-disable-next-line
  name: 'Index',
  components: {
    Aside,
    Header,
    Tabs
  },

  data() {
    return {
      asideWidth: '220px',
      isCollapse: false,
      icon: 'el-icon-s-fold'
    }
  },
  methods: {
    doCollapse() {
      this.isCollapse = !this.isCollapse;
      if (this.isCollapse) {
        this.asideWidth = '64px';
        this.icon = 'el-icon-s-unfold';
      } else {
        this.asideWidth = '220px';
        this.icon = 'el-icon-s-fold';
      }
    }
  }
}
</script>

<style scoped>
body {
  margin: 0;
}

.aside {
  min-height: 98vh;
  background-color: #176ed1;
}

.container {
  min-height: 100vh;
}

.el-header {
  text-align: right;
  font-size: 12px;
  width: 100%;
  border-bottom: blue;
  line-height: 60px;
  background-color: #176ed1;
  color: black;
}

.footer {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #176ed1;
  font-size: 20px;
  line-height: 60px;
}
</style>